@extends "main.html"

@block body

<fieldset class="layui-bg-gray layui-elem-fieldset">
    <legend>条件搜索</legend>
    <form class="layui-form layui-form-pane form-search" onsubmit="return false" autocomplete="off">

        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">管理员账户</label>
            <div class="layui-input-inline">
                <input name="admin_user_account" id="admin_user_account" value="" placeholder="请输入内容" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">创建时间 >=</label>
            <div class="layui-input-inline">
                <input name="created_at" id="created_at" value="" placeholder="yyyy-MM-dd" class="layui-input datetime">
            </div>
        </div>

        <div class="layui-form-item layui-inline">
            <button type="button" id="search_btn" class="layui-btn layui-btn-primary" data-type="reload"><i class="layui-icon layui-icon-search"></i></button>
        </div>
    </form>
</fieldset>

<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-panel">
            <div style="padding: 10px;"></div>
        </div>
    </div>
</div>

<table class="layui-hide" id="table-demo" lay-filter="table-filter" lay-skin="nob"></table>

@endblock

@block js
<script>
    layui.use(['table', 'form', 'laydate'], function(){
        var table = layui.table;
        layui.form.render();

        $('.datetime').each(function(){
            layui.laydate.render({elem:this, trigger:"click"});
        });

        table.render({
            elem:"#table-demo",
            url:"{{ uri }}/show",
            method:"get",
            page:true,
            toolbar: '#toolbar-demo',
            defaultToolbar:['filter', 'print', 'exports'],
            request:{
                pageName:"page",
                limitName:"limit"
            },
            response:{
                countName:"total",
                dataName:"data"
            },
            cols:[[
                {type: 'checkbox', fixed: 'left'},
                {field:"id", title:"ID", width:100, align:'center'},
                {field:"admin_user_account", title:"管理员账户", align:'center'},
                {field:"ip", title:"IP", align:'center'},
                {field:"other", title:"其它说明", align:'center'},
                {field:"created_at", title:"创建时间", align:'center'},
                // {fixed: 'right', title:'操作', align:'center', toolbar: '#tool-demo'}
            ]],
            done:function(response, curr, count){
                // console.log(response);
            }
        });

        // 监听事件
        table.on('tool(table-filter)', function (obj){
            // 获取选中的数据
            // console.log(obj); //当前行的一些常用操作集合
            // console.log(obj.checked); //当前是否选中状态
            // console.log(obj.data); //选中行的相关数据
            // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
            // console.log(obj.event);
            let data = obj.data;
        });

        var wheres = {};
        var active = {
            reload:function(){
                table.reload("table-demo", {page: {curr:1}, where: wheres});
            }
        };

        $("#search_btn").on('click', function(){
            wheres = {};
            let admin_user_account_val = $("#admin_user_account").val().trim();
            let created_at_val = $("#created_at").val().trim();

            if (admin_user_account_val.length > 0) wheres.admin_user_account = admin_user_account_val;
            if (created_at_val.length > 0) wheres.created_at = created_at_val;

            active['reload'].call(this);
        });
    });
</script>
@endblock